<template>
  <div class="flex1 productDataRight">
    <el-tabs v-model="activeName" type="border-card" style="margin-top:0px!important">
      <el-tab-pane name="1">
        <span slot="label">
          <i class="el-icon-user"></i> 联系人
        </span>
        <div class="rightList flex1">
          <div
            v-for="(item, index) in contacnPer"
            :key="'contacnPer' + index"
            class="flex-align-center mb20"
          >
            <div class="albumBox flex-center">
              <img :src="require('../../assets/images/profile.jpg')" />
            </div>
            <div class="contentBox flex1">
              <div class="topBox flex-align-center">
                <span>{{ item.name }} {{item.phone}}</span>
              </div>
              <div class="bottomBox font10 more">{{ item.message }}</div>
            </div>
            <div class="albumBox flex-center">
              <img :src="require('../../assets/icons/icon_019.png')" class="icon_phone" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          <i class="el-icon-chat-dot-square"></i> 消息通知
        </span>
        <div class="rightList flex1">
          <div
            v-for="(item, index) in messageData"
            :key="'messageData' + index"
            class="flex-align-center"
          >
            <div
              class="albumBox bg-blue flex-center"
              :style="{backgroundColor: item.color}"
            >{{ item.album }}</div>
            <div class="contentBox">
              <div class="topBox flex-align-center">
                <span>{{ item.name }}</span>
                <span class="font12">下午 14:59</span>
              </div>
              <div class="bottomBox font10 more">{{ item.message }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'runborder',
  components: {},
  data() {
    return {
      activeName: '2',
      messageData: [
        {
          name: '生产一组',
          time: 1628578511075,
          message: '[分享]进度实时在线监控 分享了一个链接,赶快点击查看...',
          album: 'sc',
          color: '#2175FF',
        },
        {
          name: 'SMT办公室',
          time: 1628578511075,
          message: '生产进度怎么样了，有人能跟我说一下情况吗，我这边...',
          album: 'SMT',
          color: '#FFB811',
        },
        {
          name: '黄渤',
          time: 1628578511075,
          message: '把你们组的生产计划跟我这边对一下',
          album: '渤',
          color: '#FF5757',
        },
        {
          name: '质检五组',
          time: 1628578511075,
          message: '刚刚的文件再发我一次',
          album: '质',
          color: '#2175FF',
        },
        {
          name: 'SMT办公室',
          time: 1628578511075,
          message: '生产进度怎么样了，有人能跟我说一下情况吗，我这边...',
          album: 'SMT',
          color: '#FFB811',
        },
        {
          name: '生产一组',
          time: 1628578511075,
          message: '[分享]进度实时在线监控 分享了一个链接,赶快点击查看...',
          album: 'sc',
          color: '#2175FF',
        },
        {
          name: 'SMT办公室',
          time: 1628578511075,
          message: '生产进度怎么样了，有人能跟我说一下情况吗，我这边...',
          album: 'SMT',
          color: '#FFB811',
        },
        {
          name: '黄渤',
          time: 1628578511075,
          message: '把你们组的生产计划跟我这边对一下',
          album: '渤',
          color: '#FF5757',
        },
        {
          name: '质检五组',
          time: 1628578511075,
          message: '刚刚的文件再发我一次',
          album: '质',
          color: '#2175FF',
        },
        {
          name: 'SMT办公室',
          time: 1628578511075,
          message: '生产进度怎么样了，有人能跟我说一下情况吗，我这边...',
          album: 'SMT',
          color: '#FFB811',
        },
        {
          name: '黄渤',
          time: 1628578511075,
          message: '把你们组的生产计划跟我这边对一下',
          album: '渤',
          color: '#FF5757',
        },
      ],
      contacnPer: [
        {
          imgUrl: '../../assets/images/profile.jpg',
          name: '张三',
          phone: '15768254752',
          message: '业务负责人',
        },
        {
          imgUrl: '../../assets/images/login-background.jpg',
          name: '李四',
          phone: '15768254752',
          message: '业务负责人',
        },
        {
          imgUrl: '../../assets/images/login-background.jpg',
          name: '李四',
          phone: '15768254752',
          message: '业务负责人',
        },
        {
          imgUrl: '../../assets/images/login-background.jpg',
          name: '李四',
          phone: '15768254752',
          message: '业务负责人',
        },
      ],
    }
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {},
}
</script>

<style lang="less" scopted>
.productDataRight {
  width: 340px;
  max-height: 380px;
  float: right;
  background-color: white;
  overflow: auto;
  .rightNav {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    div {
      margin-right: 20px;
      cursor: pointer;
      img {
        margin-right: 6px;
      }
    }
  }
  .rightList {
    & > div {
      height: 36px;
      padding: 0 10px;
      margin: 7px 0;
      .albumBox {
        height: 30px;
        min-width: 30px;
        border-radius: 4px;
        color: white;
        margin-right: 10px;
        img {
          width: 50px;
          height: 50px;
        }
        .icon_phone {
          width: 50px;
          height: 40px;
          transform: rotate(-15deg);
          -ms-transform: rotate(-15deg); /* Internet Explorer */
          -moz-transform: rotate(-15deg); /* Firefox */
          -webkit-transform: rotate(-15deg); /* Safari 和 Chrome */
          -o-transform: rotate(-15deg); /* Opera */
        }
      }
      .contentBox {
        flex: 1;
        margin: 0 5px;
        .topBox {
          justify-content: space-between;
        }
        .bottomBox {
          color: #888888;
          width: 200px;
          position: relative;
          left: -18px;
          top: -2px;
        }
      }
    }
  }
  .el-tabs__item {
    width: 50% !important;
  }
}

.listDataRight {
  width: 320px;
  height: 100%;
  float: right;
  background-color: white;
  .ant-tabs-bar {
    margin: 0;
  }
  .ant-tabs-content {
    margin-bottom: 10px;
  }
  .itemBox {
    margin-top: 10px;
    height: 80px;
    padding-left: 30px;
    .itemBottom {
      padding: 0 10px;
      text-align: right;
      justify-content: space-between;
    }
  }
  .productDataRight {
    width: 320px;
    height: 100%;
    float: right;
    background-color: white;
    overflow: auto;
    .rightNav {
      height: 40px;
      padding: 0 10px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      div {
        margin-right: 20px;
        cursor: pointer;
        img {
          margin-right: 6px;
        }
      }
    }
    .rightList {
      & > div {
        height: 36px;
        padding: 0 10px;
        margin: 7px 0;
        .albumBox {
          height: 30px;
          min-width: 30px;
          border-radius: 4px;
          color: white;
          margin-right: 10px;
        }
        .contentBox {
          flex: 1;
          .topBox {
            justify-content: space-between;
          }
          .bottomBox {
            color: #888888;
            width: 240px;
            position: relative;
            left: -22px;
            top: -2px;
          }
        }
      }
    }
  }
}
</style>
